<template>
	<gui-page ref="guiPage1" :fullPage="true">
		<template v-slot:gBody>
			<view class="gui-flex1 gui-flex gui-column">
				<view style="padding:20rpx 30rpx;" class="gui-border-b">
					<gui-switch-navigation :items="tabs" :size="100" :currentIndex="currentIndex" :isCenter="true"
						fontSize="40rpx" activeFontSize="40rpx" padding="100rpx" activeLineWidth="100rpx"
						@change="navchange"></gui-switch-navigation>
				</view>
				<swiper :current="currentIndex" disable-touch="false" @change="swiperChange" :style="{
					height:mainHeight+'px',
					width:'750rpx'
				}">
					<!-- 轮播项目数量对应 上面的选项标签 -->
					<swiper-item>
						<!-- 使用滚动区域来实现主体内容区域 -->
						<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true" class="gui-bg-gray">
							<!--数据这一选项内容-->
							<gui-page>
								<template v-slot:gBody>
									<cardHeader :title="`${devname}-${devtype}-设备id=${devid}的节电节能日期列表`"></cardHeader>
									<view v-for="(item,index) in list" :key="item.id"
										class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-box-shadow">
										<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
											<text class="gui-list-icon gui-icons gui-color-gray">&#xe6d1;</text>
											<view class="gui-card-desc">
												<view class="gui-flex gui-rows gui-nowrap gui-align-items-center"
													style="margin-top: 15rpx;">
													<text class="gui-card-name gui-primary-text"
														style="font-size: 16px;">日期时间：{{item.sj}}</text>
												</view>
											</view>
										</view>
										<view
											class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
											<text @click="tojddetail(item)"
												class="gui-icons gui-primary-color gui-card-footer-item gui-border-r"
												style="font-size: 16px;">&#xe624; 当日节能节电详情</text>
											<text @click="tojdtuli(item)"
												class="gui-icons gui-primary-color gui-card-footer-item gui-border-r"
												style="font-size: 16px;">&#xe614; 图例</text>
										</view>
									</view>
									<cardFooter
										:description="`记录总数：${total} , 第${page}页/共${pagecount}页 - 每页：${perpage}`"
										@golastpage="golastpage"
										@gonextpage="gonextpage"
									></cardFooter>
								</template>
							</gui-page>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<!-- 使用滚动区域来实现主体内容区域 -->
						<scroll-view :scroll-y="true" :style="{height:mainHeight+'px'}" class="gui-bg-gray">
							<!--总图例的曲线图-->
							<view class="charts-box">
								<gui-page>
									<template v-slot:gBody>
										<view class="gui-padding-x">
											<accordCard
												:status="currenttuliIndex === 0"
												:currentIndex="0"
												title="每日使用情况"
												:opts="opts"
												:chartData="syData"
												@open="open"
												@close="close"
											></accordCard>
											<accordCard
												:status="currenttuliIndex === 1"
												:currentIndex="1"
												title="每日节电情况"
												:opts="opts"
												:chartData="jdData"
												@open="open"
												@close="close"
											></accordCard>
											<accordCard
												:status="currenttuliIndex === 2"
												:currentIndex="2"
												title="每日设备电量(有功KWH/无功Kvar)"
												:opts="opts"
												:chartData="sbdlData"
												@open="open"
												@close="close"
											></accordCard>
										</view>
									</template>
								</gui-page>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import { ref,getCurrentInstance,createApp,onMounted } from 'vue'
	import { onLoad,onPullDownRefresh } from '@dcloudio/uni-app'
	import cardHeader from "@/lib/components/card-header.vue"
	import accordCard from "@/lib/components/accord-card.vue"
	import cardFooter from "@/lib/components/card-footer.vue"
	import guiPage from "@/Grace6/components/gui-page.vue"
	import guiSwitchNavigation from '@/Grace6/components/gui-switch-navigation.vue'
	import guiAccordionCard from '@/Grace6/components/gui-accordion-card.vue'
	import graceJS from "@/Grace6/js/grace.js"
	import ybmethod from '../../lib/js/ybmethod'
	import ybgolbal from '../../lib/js/ybgolbal'
	const ybapi = ybgolbal.getybapi(getCurrentInstance());
	const app = createApp();
	const currentInstance = getCurrentInstance();
	let currenttuliIndex = ref(0);  // 图例的下拉框索引
	let tabs = ref([{   // 选项卡
		id: 1,
		name: '数据'
	},
	{
		id: 2,
		name: '图例'
	}]);
	let currentIndex = ref(0);  // 当前选项卡索引
	let mainHeight = ref(300);  // 主体内容区域的高度
	let devid = ref(0);   // 设备id
	let devname = ref('');  // 设备名
	let devtype = ref('');  // 设备类型
	let list = ref([]);  // 设备节能列表
	let listToal = ref([]);   // 设备节能所有列表
	let listsj = ref([]);  
	let listjnyg = ref([]);
	let listjnwg = ref([]);
	let listdryg = ref([]);
	let listdrwg = ref([]);
	let listdrzdl = ref([]);
	let listdrygstart = ref([]);
	let listdrwgstart = ref([]);
	let listdrygend = ref([]);
	let listdrwgend = ref([]);
	let total = ref('');  // 设备节能总数
	let page = ref(1);
	let perpage = ref(10);
	let pagecount = ref(0);
	let syData = ref({});
	let jdData = ref({});
	let sbdlData = ref({});
	let opts = ref({
	    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
	    enableScroll: true,
	    legend: { show: true },
	    xAxis: { axisLine: true, itemCount: 3, calibration: true, scrollShow: true, marginTop: 10 },
	    yAxis: { splitNumber: 5 },
	    extra: { line: { type: "curve" }, tooltip: { showBox: true, fontSize: 10 } }
	});
	onLoad((option)=>{
		console.log("进入数据页面");
		console.log(option)
		devid.value = option.devid;
		devname.value = option.devname;
		devtype.value = option.devtype;
		getjd();
	})
	// 获取主体高度
	onMounted(()=>{
		setTimeout(() => {
			console.log(currentInstance.refs)
			// 01. 获取页面主体高度
			graceJS.getRefs('guiPage1', currentInstance, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					mainHeight.value = e.height - uni.upx2px(110);
					console.log("获取高度")
					console.log(mainHeight.value)
				});
			});
		}, 300);
		
	});
	// 刷新
	onPullDownRefresh(()=>{
		ybmethod.onPullDownRefresh(getjd);
	});
	function open(idx){
		console.log("打开参数："+idx)
		currenttuliIndex.value = idx;
		console.log("打开："+currenttuliIndex.value)
	}
	function close(){
		currenttuliIndex.value = -1;
		console.log("关闭："+currenttuliIndex.value)
	}
	function getServerData(){
		console.log("曲线图获取数据");
		if(!total.value) {
			return;
		}
		ybapi.Backiottjjn_FastList(1, total.value, devid.value, function(data) {
			console.log("list值")
			console.log(data.list);
			listToal.value = data.list;
			for (let i = 0; i < listToal.value.length; i++) {
				listsj.value.unshift(ybmethod.formatDateString(String(listToal.value[i].sj)));
				listjnyg.value.unshift(listToal.value[i].jnygdl);
				listjnwg.value.unshift(listToal.value[i].jnwgdl);
				listdryg.value.unshift(listToal.value[i].curygdl);
				listdrwg.value.unshift(listToal.value[i].curwgdl);
				listdrzdl.value.unshift(listToal.value[i].curzdl);
				listdrygstart.value.unshift(listToal.value[i].curygdlstart);
				listdrwgstart.value.unshift(listToal.value[i].curwgdlstart);
				listdrygend.value.unshift(listToal.value[i].curygdlend);
				listdrwgend.value.unshift(listToal.value[i].curwgdlend);
			}
			console.log("listToal=")
			console.log(listToal.value)
			console.log(listsj.value)
			let res1 = {
				categories: listsj.value,
				series: [{
						name: '有功电量KWH',
						data: listdryg.value
					},
					{
						name: '无功电量Kvar',
						data: listdrwg.value
					},
					{
						name: '平均总电流A',
						data: listdrzdl.value
					}
				],
			};
			let res2 = {
				categories: listsj.value,
				series: [{
						name: '节电的有功电量KWH',
						data: listjnyg.value
					},
					{
						name: '节电的无功电量Kvar',
						data: listjnwg.value
					}
				]
			};
			let res3 = {
				categories: listsj.value,
				series: [{
						name: '有功电量一天起始值KWH',
						data: listdrygstart.value
					},
					{
						name: '无功电量一天起始值Kvar',
						data: listdrwgstart.value
					},
					{
						name: '有功电量一天结束值KWH',
						data: listdrygend.value
					},
					{
						name: '无功电量一天结束值Kvar',
						data: listdrwgend.value
					}
				]
			}
			syData.value = JSON.parse(JSON.stringify(res1));
			jdData.value = JSON.parse(JSON.stringify(res2));
			sbdlData.value = JSON.parse(JSON.stringify(res3));
		},
		function(e) {
			console.log(e)
		});
	}
	// 根据设备id获取该设备下的节能日期列表
	function getjd(){
		ybapi.Backiottjjn_FastList(page.value, perpage.value, devid.value, function(data) {
			page.value = data.pager.page;
			perpage.value = data.pager.pageSize;
			list.value = data.list;
			list.value = data.list.map(item => ({
				...item,
				sj: ybmethod.formatDateString(String(item.sj))
			}));
		}, function(e) {
			console.log(e);
		});
		ybapi.Backiottjjn_Gettotal(devid.value, function(data) {
			total.value = data.total;
			pagecount.value = ybmethod.divideWithRemainderPlusOne(total.value, perpage.value);
			getServerData()
		})
	}
	// 切换当前顶部选项卡
	function navchange(index){
		currentIndex.value = index;
	}
	// 根据选项卡切换当前内容
	function swiperChange(e){
		var index = e.detail.current;
		currentIndex.value = index;
	}
	// 上一页
	function golastpage() {
		if (page.value > 1) {
			page.value = page.value - 1;
			getjd();
		}
	}
	// 下一页
	function gonextpage() {
		if(page.value !== pagecount.value) {
			page.value = page.value + 1;
			getjd();
		}
	}
	// 跳转节能详情页面
	function tojddetail(item){
		console.log(item.id)
		uni.navigateTo({
			url: '/pages/jddetail/jddetail?id=' + item.id,
		});
	}
	// 跳转当前日期图例页面
	function tojdtuli(item) {
		console.log(item)
		uni.navigateTo({
			url: "/pages/jdtuli/jdtuli?id=" + item.id
		})
	}
	app.component({
		cardHeader,
		accordCard,
		cardFooter,
		guiPage,
		guiSwitchNavigation,
		guiAccordionCard
	});
	
</script>

<style scoped>
	@import "../../lib/css/ybcard.css";
	.demo-nav {
		padding: 15rpx 30rpx;
	}

	.demo-text {
		line-height: 200rpx;
		padding-bottom: 3000px;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>
